<template>
    <div class="search" ref="total_Search">
        <div class="search-input" :class="search_focus_flag ? 'search_focus' : ''">
            <span class="in-search">
                <icon-search theme="outline" size="0.13rem" fill="#333" />
            </span>
            <input type="text" autocomplete="off" placeholder="全网搜索" v-model="input_search" @focus="search_focus"
                @blur="search_blur" @keyup.enter.native="keyup" />
            <span @click="submit_search" class="search-right">
                <icon-search theme="outline" size="0.15rem" fill="#333" />
                <span style="color: black">search</span>
            </span>
        </div>
        <div :class="tipsShow ? 'tips-show' : 'tips-hidden'" v-if="input_search">
            <span v-for="kws in keywordsArray" @click="choseKeyword(kws)">
                {{ kws }}
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, getCurrentInstance, onMounted } from "vue";
import { debounce } from "@/hooks/tools";
import { get } from "@/tools/api/api";
import { usePhotoStore } from "@/store/photo";
import { useRouter } from "vue-router";
// 引入仓库
const photoStore = usePhotoStore();
// 创建实例
const instance = getCurrentInstance()
// 引入路由
const router = useRouter()

onMounted(() => {
    if (photoStore.searchKeyWords) {
        input_search.value = photoStore.searchKeyWords;
        instance?.proxy?.$Bus.emit("searchContent", input_search.value);
        instance?.proxy?.$Bus.emit("onClickTab", true);
    }
})

// 搜索框内容
const input_search = ref("金毛");

// 确认搜索内容，将关键字和其它操作派发到其它组件
const submit_search = () => {
    router.push('/home')
    instance?.proxy?.$Bus.emit("searchContent", input_search.value);
    instance?.proxy?.$Bus.emit("onClickTab", true);
    // tab转换到发现
    photoStore.$patch((state) => {
        state.isSearchTab = true;
        state.searchPage = 1;
        state.searchKeyWords = input_search.value
    })
}


//键盘回车事件
const keyup = () => {
    tipsShow.value = false;
    submit_search();

}

//确认关键字
const choseKeyword = (kws: string) => {
    input_search.value = kws
    tipsShow.value = false;
    submit_search();
}

/**
 * 补全关键词
 */
// const myDebounced = new debounced().use()
const keywordsArray = ref(<string[]>[])
watch(input_search, (newValue: string, oldValue: string) => {
    if (!newValue) {
        return
    }
    //通过接口补全关键字
    get("kwComplete", {
        kw: newValue
    }).then((res: any) => {
        if (res.code === 100) {
            keywordsArray.value = res.data.result
        }
    })

})


//是否显示提示标指位
const tipsShow = ref<boolean>(false)

// 搜索框聚焦效果聚焦
const search_focus_flag = ref<boolean>(false);
const search_focus = () => {
    search_focus_flag.value = true;
    tipsShow.value = true
};
const search_blur = () => {
    search_focus_flag.value = false;
    setTimeout(() => {
        tipsShow.value = false;
    }, 100);

};
</script>

<style lang="scss" scoped>
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;
$theme-color: rgb(96, 197, 186); //#5fc5ba

.search {
    width: $logo-width * 9;
    height: $header-height * 0.6;

    .search-input {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 0.2rem;
        // background-color: #CCFFFF;
        background-color: rgb(200, 210, 200);

        .in-search {
            width: $logo-width * 0.3;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        input {
            background-color: rgb(200, 210, 200);
            height: 90%;
            width: $logo-width * 10.7;
            border: 0;
            outline: none;
            font-size: $a-font-size;
        }

        span {
            font-size: $a-font-size;
            line-height: $header-height * 0.6;
            font-weight: $a-font-size;
            display: flex;
            align-items: center;
        }

        &-right {
            width: $logo-width;
        }
    }

    .tips-show {
        position: relative;
        top: $header-height*0.3;
        width: $logo-width * 8;
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 0.2rem;
        background-color: rgb(200, 210, 200);
        opacity: 80%;
        padding: 0.1rem;

        span {
            padding-left: 0.08rem;
            height: $header-height*0.7;
            width: 100%;
            color: black;
            font-size: $a-font-size*1.2;
            font-weight: bolder;
            border-radius: 0.1rem;
            cursor: pointer;

            &:hover {
                // transform: scale(1.01, 1.01);
                transform: translate(0.01rem, -0.01rem);
                background-color: wheat;
            }
        }
    }

    .tips-hidden {
        display: none
    }

}

.search_focus {
    border-color: #979daf;
    box-shadow: 0.01rem 0.01rem 0.01rem 0.01rem grey;
}

@media screen and (max-width:1024px) {
    .search {
        width: $logo-width*4.2;

        .search-right {
            display: none;
        }
    }

}

@media screen and(max-width:600px) {
    .search {
        display: none;
    }

}
</style>